<template>
    <div>
        <full-page :options="options">
            <div class="section">
                <div class="box1">
                section1

                  <!-- 登录区 -->
    <div class="login_box">
      <!-- 头像区 -->
      <div class="avatar_box">
        <img src="../assets/preview.gif" alt="">
      </div>
      <!-- 登录表单区 -->
      <el-form :model="loginform" :rules="loginRules" ref="loginFormRef" label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-user" v-model="loginform.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input prefix-icon="iconfont icon-3702mima" v-model="loginform.password" type="password"></el-input>
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item class="btns">

          <el-button type="success" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
          <el-button @click="fullpage">fullpage</el-button>
          <el-button @click="animation">animation</el-button>
        </el-form-item>
      </el-form>
    </div>


                </div>
            </div>
            <div class="section">
                <div class="box2">
                section2
                </div>
                
            </div>
            <div class="section">
                <div class="box3">
                section3
                </div>
            </div>
            <div class="section">
                <div class="box4">
                section4
                </div>
                
            </div>
        </full-page>
        <div class="go" @click="go"><img src="../assets/img/full/东哥素材.png"alt=""></div>
        
        </div>
</template>
 
<script>
export default {
    name: '',
    data () {
        return {
                  loginform: {
          username:'admin',
          password:'123456'
        },

        // 表单校验
      loginRules: {
         username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
         password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
      },
            options: {
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                afterLoad: this.afterLoad,
                scrollOverflow: true,
                scrollBar: false,
                menu: '#menu',
                sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
            },
        }
    },
    methods: {
      go(){
        this.$router.push('/login')
      },
      afterLoad:function(anchorLink,index){
        if(index.index === 2){
          
        }
      },
            //点击重置按钮
      resetLoginForm(){
        console.log(this);
        this.$refs.loginFormRef.resetFields()
      },
      //登录
      login(){
        this.$refs.loginFormRef.validate(async valid => {
          if (valid) {
            const {data:res,request:request} =await this.$http.post('login',this.loginform);
            console.log(res);
            console.log(request.readyState);
            if (request.readyState===4) {
              if(res.meta.status>=200&&res.meta.status<300){
                this.$notify({
                  title: res.meta.msg,
                  message: '欢迎使用本系统',
                  type: 'success'
                });
                // 将token保存在session Storage中
                window.sessionStorage.setItem('token',res.data.token)
                this.$router.push('/home')
              }else{
                this.$notify.error({
                  title: res.meta.msg,
                  message: '登录失败',
                });
                
                this.$router.push('/view')
                // window.location.href = "https://mb.mituo.cn/mui111/"
              }
            }else{
              this.$message.error("readyState状态错误")
            }
          }
        })
      }
    }
    
}
</script>
 
<style lang="less" scoped>
 .box{
   width: 100%;
   height: 100%;
   background-size: cover;
 }
 .box1{
   background: url(../assets/img/full/1.jpeg);
   .box();
 }
 .box2{
   background: url(../assets/img/full/2.jpeg);
   .box();
 }
 .box3{
   background: url(../assets/img/full/3.jpeg);
   .box();
 }
 .box4{
   background: url(../assets/img/full/4.jpeg);
   .box();
 }
 .go{
   position: fixed;
     top: 5%;
     right: -20%;
   >img{
     border-radius: 50%;
     width: 50%;
   }
 }
 .dog{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: dog;
  animation-duration: 5s;
  animation-iteration-count:1;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
@keyframes dog {
  0%{
    top: 0;
    left: 0;
  }
  25%{
    top: 0;
    left: 200px;
  }
  50%{
    top: 200px;
    left: 200px;
  }
  75%{
    top: 200px;
    left: 0px;
  }
  100%{
    top: 0;
    left: 0px;
  }
}
//中间盒子样式
.login_box {
  z-index: 1;
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 50px;
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translate(-50%,-50%);
  box-shadow: 10px 10px 10px rgb(78, 77, 77);
  //新样式
  background: linear-gradient(
    to right bottom,
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.1)
    );
    backdrop-filter: blur(8px);
}
//头像
.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #ddd;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box
}
.btns {
  display: flex;
  justify-content:center

}
 
</style>